<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .slider-bar {
      position: absolute;
      left: 50%;
      top: 300px;
      margin-left: 600px;
      width: 45px;
      height: 130px;
      background-color: pink;
    }

    .w {
      width: 1200px;
      margin: 10px auto;
    }

    .header {
      height: 150px;
      background-color: purple;
    }

    .banner {
      height: 250px;
      background-color: skyblue;
    }

    .main {
      height: 1000px;
      background-color: yellowgreen;
    }

    span {
      display: none;
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
<div class="slider-bar">
  <span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>

<script>
  var sliderBar = document.querySelector('.slider-bar');
  var banner = document.querySelector('.banner');
  var main = document.querySelector('.main');
  var span = document.querySelector('span');

  var bannerTop = banner.offsetTop;
  var sliderBarTop = sliderBar.offsetTop;
  var mainTop = main.offsetTop;

  document.addEventListener('scroll', function (e) {
    if (window.pageYOffset >= bannerTop) {
      sliderBar.style.position = 'fixed';
      sliderBar.style.top = sliderBarTop - bannerTop + 'px';
    } else {
      sliderBar.style.position = 'absolute';
      sliderBar.style.top = '300px';
    }
    if (window.pageYOffset >= mainTop) {
      span.style.display = 'block';
    } else {
      span.style.display = 'none';
    }
  })

  span.addEventListener('click', function () {
    animate(window, 0);
  })

  function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      // var step = Math.ceil((target - obj.offsetLeft) / 10);
      var step = (target - pageYOffset) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);

      window.scroll(0, pageYOffset - Math.abs(step));

      if (window.pageYOffset == target) {
        clearInterval(obj.timer);
        callback && callback();
      }

    }, 10)
  }
</script>
</body>
</html>